<script lang="ts" setup>
import router from "@/router";
import UserStoress from "@/store/user";
import { ArrowRight, CircleCloseFilled } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import { ref, reactive, watch, watchEffect } from "vue";
//实例化
const store = UserStoress();

//进行判断，token中有没有值，有值可展示，无值需跳转登录页
if (!store.token) {
  //无值
  router.push("/login");
}
//进行判断，token有没有过期，过期则跳转提示页

//弹窗判断
const dialogFormVisible = ref(false);
//拿到表格
const ruleFormRef = ref<FormInstance>();
//表格存值
const form = reactive({
  name: "",
  url: "",
  email: "",
  description: "",
});
//将保存的值赋值给表单
//axios拿值比较慢，监听一下
watchEffect(() => {
  ({
    name: form.name,
    url: form.url,
    email: form.email,
    description: form.description,
  } = store.userData);
});

//表单校验
const rules = reactive<FormRules>({
  email: [
    { type: "email", message: "请输入有效的电子邮件地址。", trigger: "blur" },
  ],
  url: [{ type: "url", message: "请输入有效的网址。", trigger: "blur" }],
});
//判断值
const submitForm = async (formEl: FormInstance | undefined) => {
  //没有拿到表单就返回
  if (!formEl) return;
  //拿到表单了，进行校验
  await formEl.validate((valid, fields) => {
    if (valid) {
      //校验成功
      console.log("submit!");
      //将值推送到站点
      store.apiReviseUser(store.userData.id, form);
      //关闭弹窗
      dialogFormVisible.value = false;
    } else {
      //校验失败
      console.log("error submit!", fields);
    }
  });
};
</script>
<template>
  <div class="rs-header">
    <nav>
      <div class="localnav localnav-content">
        <div class="title">
          <h1>账户</h1>
        </div>

        <el-link type="primary" @click="store.commitInfo">
          注销
          <el-icon><ArrowRight /></el-icon>
        </el-link>
      </div>
    </nav>
    <div class="header-welcome localnav-content">
      <p>{{ store.userData.name }}，你好：</p>
    </div>
  </div>
  <!--账户设置-->
  <section class="rs-settings">
    <div class="settings localnav-content">
      <div class="row header">
        <div class="column">
          <h2 class="settings-header">账户设置</h2>
        </div>
      </div>

      <el-row :gutter="20" class="settings-container">
        <el-col :span="6">
          <h3 class="settings-subheader">触达</h3>
        </el-col>
        <el-col :span="18">
          <div class="settings-section">
            <h4>联系信息</h4>
            <p>
              你可以自己掌控你的个人信息，并可随时管理你的数据或删除你的账户。Apple
              致力于保护你的隐私。
            </p>
            <el-link type="primary" @click="dialogFormVisible = true">
              管理我的联系信息
              <el-icon><ArrowRight /></el-icon>
            </el-link>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="settings-container">
        <el-col :span="6">
          <h3 class="settings-subheader">隐私</h3>
        </el-col>
        <el-col :span="18">
          <div class="settings-section">
            <h4>个人信息</h4>
            <p>
              你可以自己掌控你的个人信息，并可随时管理你的数据或删除你的账户。Apple
              致力于保护你的隐私。
            </p>
            <el-link type="primary" @click="">
              管理我的个人信息
              <el-icon><ArrowRight /></el-icon>
            </el-link>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--修改联系信息-->
    <el-dialog
      v-model="dialogFormVisible"
      :show-close="false"
      class="custom-class"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="header">
          <el-button
            text
            :icon="CircleCloseFilled"
            :round="true"
            @click="close"
          >
          </el-button>
          <h4 :id="titleId" :class="titleClass">编辑你的联系方式</h4>
          <p>
            账单联系人会自动收到发货通知的电子邮件。如需将通知发送至备用电子邮件地址，请在下方输入邮件地址。如需通过短信接收发货状态更新信息，请在下方添加手机号码。
          </p>
        </div>
      </template>

      <el-form
        ref="ruleFormRef"
        :model="form"
        :rules="rules"
        size="large"
        label-position="left"
        status-icon
        class="form"
      >
        <el-form-item label="昵称：">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="网址：" prop="url">
          <el-input v-model="form.url" autocomplete="off" type="url" />
        </el-form-item>
        <el-form-item label="邮件：" prop="email">
          <el-input v-model="form.email" autocomplete="off" type="email" />
        </el-form-item>
        <el-form-item label="介绍：">
          <el-input
            v-model="form.description"
            autocomplete="off"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            :round="true"
            color="#0071e3"
            @click="submitForm(ruleFormRef)"
          >
            保存
          </el-button>
          <el-button text :round="true" @click="dialogFormVisible = false"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
  </section>
  <!--功能模块-->
  <section>
    <div class="account">
      <div class="localnav-content">
        <div class="content">
          <div class="inner">
            <h2>你的订单</h2>
            <p>跟踪、修改、取消订单，或进行退货。</p>
            <el-link href="#" type="primary">
              查看你的订单历史记录
              <el-icon><ArrowRight /></el-icon>
            </el-link>
          </div>
          <div class="inner">
            <h2>你的收藏</h2>
            <p>
              无论你是在线选购，还是前往 Apple Store
              零售店选购，都可以轻松收藏感兴趣的产品，并在这里跟进你的购物过程。
            </p>
            <el-link href="#" type="primary">
              查看你的收藏
              <el-icon><ArrowRight /></el-icon>
            </el-link>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<style lang="less" scoped>
.localnav-content {
  margin: 0 auto;
  max-width: 980px;
  position: relative;
  z-index: 2;

  padding: 0 16px;
}
//布局
.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
}
//一级标题
.settings-header {
  font-size: 32px;
  font-weight: 600;
  font-family: SF Pro SC, SF Pro Display, SF Pro Icons, AOS Icons, PingFang SC,
    Helvetica Neue, Helvetica, Arial, sans-serif;
}
//二级标题
.settings-subheader {
  font-size: 24px;
  line-height: 1.29167;
  font-weight: 600;
  letter-spacing: 0.009em;
  font-family: SF Pro SC, SF Pro Display, SF Pro Icons, AOS Icons, PingFang SC,
    Helvetica Neue, Helvetica, Arial, sans-serif;
  word-wrap: break-word;
}
//设置间距
.settings-container {
  margin-bottom: 17px;
}
.settings-section {
  margin-bottom: 21px;
}

.rs-header {
  background-color: #f5f5f7;
  padding-bottom: 28px;
}
.localnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  .title {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    h1 {
      font-size: 21px;
      font-weight: 600;
    }
  }
  span {
    font-size: 12px;
  }
}
.header-welcome {
  p {
    font-size: 32px;

    font-weight: 600;

    padding-top: 59px;
  }
}

.rs-settings {
  .settings {
    padding-top: 75px;
    padding-bottom: 50px;

    .header {
      margin-bottom: 47px;
      .column {
        flex-basis: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        min-width: 0;
      }
    }
  }
}
.account {
  background-color: #f5f5f7;
  .content {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 1.6em 0 40px;

    flex-wrap: wrap;

    .inner {
      background-color: #fff;
      box-sizing: border-box;
      height: auto;
      padding: 40px 42px;
      width: 475px;
      border-radius: 18px;

      margin-top: 0.8em;
      h2 {
        font-size: 32px;
        font-weight: 600;
      }
    }
  }
}
//弹出框信息

:deep(.custom-class) {
  padding: 76px;
  border-radius: 18px;
  .header {
    button {
      position: absolute;
      top: 16px;
      left: 16px;
      padding: 0;
      height: 44px;
      width: 44px;

      i {
        font-size: 2em;
        background-color: #e8e8ed;
        border-radius: 50px;
        color: #6e6e73;
      }
    }
    h4 {
      font-size: 40px;
      font-weight: 600;
      letter-spacing: 0;
      font-family: SF Pro SC, SF Pro Display, SF Pro Icons, AOS Icons,
        PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
      text-align: center;
      padding-bottom: 16px;
      line-height: 1;
    }
    p {
      font-size: 17px;
      line-height: 1.47059;
      font-weight: 400;
      letter-spacing: -0.022em;
      font-family: SF Pro SC, SF Pro Text, SF Pro Icons, AOS Icons, PingFang SC,
        Helvetica Neue, Helvetica, Arial, sans-serif;
      margin-top: 0;
      padding-bottom: 20px;
    }
  }
  .form {
    max-width: 75%;
    margin: 0 auto;
  }
  .dialog-footer {
    width: 75%;
    margin: 0 auto;
    display: block;
    text-align: center;
    button {
      width: 90%;
      padding: 18px 31px;
      margin: 0 0 12px;
      font-size: 17px;
    }
  }
}
</style>
